/**index.less**/
@import '../../variable.less';

@keyframes flashAnimation {
  0% {
    /* 初始状态 */
    opacity: 0;
  }
  50% {
    /* 中间状态 */
    opacity: 0.5;
  }
  100% {
    /* 结束状态 */
    opacity: 1;
  }
}
@keyframes changeopacity {
  from {
    opacity: 0.99999;
  }
  to {
    opacity: 1;
  }
}

@safe-padding-bottom: max(64rpx, constant(safe-area-inset-bottom));
@safe-padding-bottom: max(64rpx, env(safe-area-inset-bottom));
@fixed-bottom-btn-height: calc(
  @default-btn-height + @safe-padding-bottom + @default-margin-height
);
@menu-bar-height: 176rpx;

.inRecord{
  overflow: hidden;
  pointer-events: none;
}

.main {
  font-size: @s-fontsize;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0rpx;
}
.menu-bar {
  position: relative;
  flex-shrink: 0;
}
// 操作按钮组样式
.operate-btn-group{
  position: fixed;
  bottom:340rpx;
  right: 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s;
  font-weight: bold;
  z-index: 1000;
  animation: changeopacity infinite 2s;
  .btn-item{
    margin-bottom: 32rpx;
    width: 144rpx;
    height: 144rpx;
    text-align: center;
    line-height: 144rpx;
    border-radius: 50%;
    color: white;
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: @s-fontsize;
    position: relative;
    .share-btn{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      opacity: 0;
    }
    .dot{
      line-height: 110rpx;
    }
  }
  &.small-btn{
    .btn-item{
      width: 96rpx;
      height: 96rpx;
      line-height: 96rpx;
      .dot{
        line-height: 70rpx;
      }
    }
  }
  .btn-tip{
    font-size: @s-fontsize; 
  }
}

.body {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
  &.default-height {
    height: calc(100% - @menu-bar-height);
  }
  &.mini-height {
    height: calc(100% - @fixed-bottom-btn-height - @menu-bar-height);
  }
  .body-content {
    width: 100%;
    height: 100%;
  }
  .guide-video {
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.show{
      display: block;
    }
    &.hide{
      display: none;
    }
    .img-wrap {
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      .image {
        width: inherit;
        height: inherit;
      }
    }
    .video-wrap {
      width: 100%;
      height: 100%;
      .duration {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        z-index: 2;
        color: white;
      }
      .intro-video {
        width: 100%;
        height: 100%;
        opacity: 0;
        &.loaded {
          opacity: 1;
        }
      }
    }
  }
  .body-inner {
    width: 100%;
    height: 100%;
    background-color: #EBDABE;
    position: relative;
    box-sizing: border-box;
    &.show{
      display: block;
    }
    &.hide{
      display: none;
    }
  }
  .empty-part {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: auto;
    padding-top: 200rpx;
    box-sizing: border-box;
    .empty-part-bg {
      margin: auto;
      width: 664rpx;
      height: 760rpx;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border-radius: 16rpx;
      .start-audio {
        width: 664rpx;
        height: 547rpx;
        .image {
          width: 100%;
          height: 100%;
        }
      }
      .start-tip {
        font-size: @b-fontsize;
        text-align: center;
        margin-top: -160rpx;
        font-weight: bold;
      }
      .start-tip2 {
        font-size: @b-fontsize;
        text-align: center;
        margin-top: 32rpx;
        font-weight: bold;
      }
    }
    .guide-hand {
      margin: auto;
      width: 340rpx;
      height: 340rpx;
      margin-top: -160rpx;
      .image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .record-part {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .swiper {
      width: 100%;
      height: 100%;
      .swiper-item {
        width: 100%;
        height: 100%;
        .swiper-item-content {
          width: 100%;
          height: 100%;
          position: relative;
          box-sizing: border-box;
          padding: 0rpx 32rpx;
          &.padding-b-top{
            padding-top: 140rpx;
          }
          &.spring-festival{
            background: url(https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/note-miniProgram/spring-bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .record-content{
              color:#ffe168;
              .swiper-content{
                color:#ffe168;
              }
            }
          }
          .record-tip{
            display: flex;
            align-items: center;
            padding:8rpx;
            box-sizing: border-box;
            background-color: #b7292e;
            position: fixed;
            width: 100%;
            left:0px;
            top:0;

            .logo{
              width: 120rpx;
              height: 120rpx;
              background-color:white;
              border-radius: 120rpx;
              box-sizing: border-box;
              text-align: center;
              flex-shrink: 0;
              line-height: 120rpx;
              .image{
                width: 100%;
                height: 100%;
              }
            }
            .tip{
              margin-left: 20rpx;
              font-size: 40rpx;
              color:white;
            }
          }
          .date-audio{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 36rpx;
            font-weight: bold;  
            .date{
              height: 104rpx;
              line-height: 104rpx;
            }
          }
          
          .record-content{
            margin-top:32rpx;
            height: calc(100% - 32rpx - 104rpx - 36rpx); // 减去顶部时间和播放按钮
            width: 100%;
            &.smaller{
              height: calc(100% - 32rpx - 104rpx - 36rpx - 160rpx); // 减去顶部时间和播放按钮
            }
            .swiper-content{
              .shige{
                background-size: 115% 100%;
              }
            }
          }
          
        }
        .swiper-item-adImage{
          width: 100%;
          height: 100%;
        }
        
      }
    }
  }
  .operation-part{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      display: none;
    }
    .operate-btn-group{
      bottom:300rpx;
    }
  }
}
.footer {
  width: 100%;
  height: @fixed-bottom-btn-height;
  z-index: 10;
  flex-shrink: 0;
  &.relative {
    position: relative !important;
  }
  &.bg-white {
    background-color: white;
  }
  .btn-group {
    width: 686rpx;
    .primary-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      .image {
        width: 80rpx;
        height: 80rpx;
      }
      &.disabled {
        pointer-events: none;
      }
    }
  }
}

.invite-popup {
  border-radius: 16rpx;
  .van-icon {
    font-size: 48rpx !important;
  }
  .invite-banner {
    width: 680rpx;
    padding: 64rpx 32rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    .txt {
      font-size: @s-fontsize;
      text-align: center;
      margin-top: 32rpx;
    }
    .share-btn-wrap {
      margin-top: 32rpx;
      .share-btn {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        color: #fff;
        background-color: @primary-btn-color;
        border-radius: 50rpx;
        font-size: @s-fontsize;
      }
    }
  }
}

.more-tools-popup {
  padding-top:32rpx;
  padding-bottom: 32rpx;
  padding-bottom: @safe-padding-bottom;
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  .more-tools-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .txt-btn{
      text-align: center;
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 48rpx;
      color:#000;
      font-weight: bold;
      border-bottom: 1rpx solid #eee;
      &.danger{
        color: #E83A2F;
      }
      &.cancel{
        border-top: 6rpx solid #ededed;
        border-bottom: none;
      }
    }

  }
}

// 录音页面
.reocrd-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, 0.8);
  z-index: 1000;
  padding-top: 280rpx;
  font-size: @s-fontsize;
  box-sizing: border-box;
  &.show{
    top:0
  }

  .time-group {
    color: white;
    .time {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #e83a2f;
        margin-right: 10rpx;
      }
    }
    .time2 {
      display: flex;
      align-items: center;
      justify-content: center;
      .time2-inner {
        background-color: #333;
        border-radius: 8rpx;
        text-align: center;
        padding: 16rpx;
        color: white;
      }
    }
  }

  .progress-bar {
    margin: auto;
    margin-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 654rpx;
    height: 240rpx;
    text-align: center;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    &.default{
      background-color: #68ba45;
    }
    &.danger{
      background-color: #d86207;
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #95cf7d;
      
      &.danger {
        background-color: #e49151;
      }
    }
    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 400rpx;
      height: 180rpx;
      z-index: 10;
      .image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .arrow {
    // 向下的箭头
    width: 0;
    height: 0;
    border-left: 36rpx solid transparent;
    border-right: 36rpx solid transparent;
    border-top: 36rpx solid rgba(0, 0, 0, 0.1);
    margin: auto;
  }
  .bottom-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    .b-tip{
      color:white;
      text-align: center;
      margin-bottom: 64rpx;
      &.danger{
        color:#e49151;
      }
    }
    .close {
      margin: auto;
      width: 144rpx;
      height:144rpx;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .b-tip-2 {
      margin-top: 60rpx;
      text-align: center;
      height: 120rpx;
      color: white;
    }
    .banner {
      width: 100%;
      height: 284rpx;
      position: relative;
      margin-top: 32rpx;
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .image{
          width: 100%;
          height: 100%;
        }
      }
      .voice {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 73rpx;
        height: 103rpx;
        .image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.sheet-inner {
  padding: 32rpx;
  font-size: @m-fontsize;
  .btn-item {
    margin-top: 32rpx;
  }
}

.first-guide-popup {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: transparent !important;
  box-sizing: border-box;
  z-index: 10000;
  box-sizing: border-box;
  overflow: hidden;
  .audio{
    margin: auto;
    margin-top: 100rpx;
    width: 664rpx;
    height: 547rpx;
    .image {
      width: 100%;
      height: 100%;
    }
    
  }
  .operate-btn-group {
    z-index: 100;
    bottom:340rpx!important;
    
    .opcaity0{
      opacity: 0;
    }
    .btn-item{
      background-color: #ff8080;
    }
    
  }
  .btn-tip {
    position: absolute;
    width: 100%;
    bottom:400rpx;
    left:50%;
    transform: translate(-50%);
    color: white;
    font-size: @s-fontsize;
    text-align: center;
    .btn-tip-item{
      
      .tip-txt{
        height: 96rpx;
      line-height: 96rpx;
      }
      
    }
  }
}

.second-guide-popup {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box;
  padding: 32rpx;
  font-size: @s-fontsize;
  color: white;
  box-sizing: border-box;
  overflow: hidden;
  
  .second-guide-popup-content {
    width: 100%;
    height: 100%;
    background: transparent;
    padding-top: 100rpx;
    box-sizing: border-box;
    .audio{
      margin: auto;
      
      width: 664rpx;
      height: 547rpx;
      .image {
        width: 100%;
        height: 100%;
      }
      
    }
    .tip{
      text-align: center;
    }
    
    .img-shouzhi {
      position: absolute;
      left:300rpx;
      bottom: 400rpx;
      width: 340rpx;
      height: 340rpx;
      z-index: 1;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .img-re{
      position: absolute;
      bottom: 200rpx;
      left:50%;
      transform: translate(-50%);
      width: 106rpx;
      height: 685rpx;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .primary-btn {
      position: fixed;
      bottom: calc(32rpx + @safe-padding-bottom);
      width: 686rpx;
    }
  }
}
.self-toast{
  font-size: 48rpx;
  padding: 32rpx ;
  border-radius: 16rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  word-break: keep-all;
  white-space: nowrap;
}
